<template>
	<view>
		<uni-nav-bar :fixed="true" color="#333333" :background-color="themeBgColor" :border="false">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#666666" />
				<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="搜索项目/机构"
					@confirm="search">
				<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22"
					@click="clear" />
			</view>
		</uni-nav-bar>

		<uni-nav-bar :fixed="true" color="#333333" :background-color="themeBgColor" :border="false">
			<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft" style="z-index: 9999;">
				<view class="tui-tabs-view tui-tabs-relative text-white" style="
				      height: 80rpx;
				      padding: 0 30rpx;
				      top: auto;
				      text-align: center;
				      line-height: 80rpx;
				      cursor: pointer; /* 手型光标 */
				    " :style="{backgroundColor: themeBgColor}" @click="navigateToAddProject">
					新增知识库内容
				</view>
				<!-- <view class="tui-tabs-view tui-tabs-relative text-white" style="height:80rpx;padding:0 30rpx;top:auto" :style="{backgroundColor:themeBgColor}">
					<view v-for="(item, index) in tabbar" :key="index" class="tui-tabs-item" style="width:50%" @tap.stop="swichNav(index)">
						<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}"
						 :style="{color:currentTab==index?'#ffffb8':'#ffffff',fontSize:'28rpx',lineHeight:'28rpx',fontWeight:false && currentTab==index?'bold':'normal'}">{{item.name}}</view>
					</view>
					<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:'68rpx',height:'6rpx',bottom:'0rpx',background:'#ffffb8'}"></view>
				</view> -->
			</scroll-view>
		</uni-nav-bar>
		<swiper :class="darkMode?'custom-dark':'custom-light'" class="tab-content" :current="currentTab" duration="300"
			@change="switchTab" :style="{height:winHeight+'px'}">
			<swiper-item>
				<scroll-view scroll-y class="scoll-y">
					<audit-project ref="auditProjectRef"></audit-project>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y class="scoll-y">
					<audit-user ref="auditUserRef"></audit-user>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import auditUser from './user/audit-user'
	import auditProject from './project/audit-project'
	import md5 from '@/common/lib/md5.min.js'
	export default {
		components: {
			uniIcons,
			uniNavBar,
			auditUser,
			auditProject
		},
		computed: {
			...mapGetters([
				'user', // 用户基础信息
				'authData', // 完整认证数据
				'token', // 直接获取token
				'isWeixinLogin', // 登录类型判断
				'isLoggedIn', // 新增：登录状态判断
				'getUserdata',
				'themeBgColor',
				 'darkMode'
			]),
			userData() {
				console.log("计算属性触发"); // 调试用
				console.log('userData func call', this.getUserData);
				return this.getUserData || {}
			},
			async mounted() {
				console.log('从Vuex获取的数据:', this.userData)
				console.log("映射的getters:", this.$store.getters);
				console.log("映射的getters getUserData", this.$store.getters.getUserData);
				await this.$nextTick();
				if(this.$refs.auditProjectRef?.queryBylist){
					const uid = this.$store.getters.getUserData?.uid || 'default_uid'
					this.$refs.auditProjectRef.queryBylist(uid);
				}
				
			},

			stateData() {
				return this.$store.state
			},
			//...mapGetters(['themeBgColor', 'darkMode']),
			tabbar() {
				return [{
					name: this.$t('ProjectApproval')
				}, {
					name: this.$t('UserApproval')
				}]
			}
		},
		data() {
			return {
				bgColor: '#FFFFFF',
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				isCheckingAuth: false
			}
		},
		onShow() {
			//this.searchVal='耗时';
			if (this.$refs.auditProjectRef && typeof this.$refs.auditProjectRef.queryBylist === 'function') {
				this.$refs.auditProjectRef.queryByName(this.searchVal);
				//this.$refs.auditProjectRef.queryBylist(this.searchVal);
				//this.$refs.auditProjectRef.queryBylist();
			}
		},
		onReady() {
			console.log('从Vuex获取的数据:', this.userData)
			//console.log("映射的getters:", this.$store.getters);
			//console.log("映射的getters: isLoggedIn", this.$store.getters.isLoggedIn);
			console.log("映射的getters: userData", this.$store.getters.getUserData);
			//console.log("映射的getters: userData uid", this.$store.getters.getUserData.uid);

			//console.log("映射的getters: userData ['uid']", this.$store.getters.getUserData['uid']);
			//console.log(uni.$store.state.user.data);
			// 确保在登录状态下才执行组件方法
			console.log('onReady', this.isLoggedIn);
			
				uni.setNavigationBarTitle({
					title: this.$t('ToDo')
				})
				this.setNavBarColor()
				this.setDarkMode()
				//this.$refs.auditProjectRef.queryBylist()
			
			uni.setNavigationBarTitle({
				title: this.$t('ToDo')
			})
			this.setNavBarColor()
			this.setDarkMode()
		},
		watch: {
			themeBgColor() {
				this.setNavBarColor()
			},
			darkMode() {
				this.setDarkMode()
			}
		},

		async onLoad(options) {
			// ✅ 安全！Vue 已初始化计算属性
			const uid = this.$store.getters.getUserData?.uid || 'default_uid'
			console.log(this.userData); // 触发 userData() 计算
			//先初始化
			//this.$refs.auditProjectRef.queryBylist() 
			// 先检查登录状态
			await this.checkAuth()

			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
					this.winWidth = res.windowWidth
					this.checkCor()
				}
			})
		},
		onShow(e) {
			// setNavBar
			this.setNavBarColor()
			// pages
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
				this.search()
			}
		},
		methods: {
			async checkAuth() {
				const uid = this.$store.getters.getUserData?.uid || 'default_uid'
				//if (this.isCheckingAuth) return
				//this.isCheckingAuth = true
				console.log('checkauth uid', uid);			
					// 双重检查：先检查isLoggedIn，再检查uid
					//if (!this.isLoggedIn || !this.userData?.uid) {
					if (uid == "default_uid") {
						console.log('未登录或uid不存在，跳转登录')
						//this.$refs.auditProjectRef.queryBylist()
						/* uni.redirectTo({
						  url: '/pages/login/login?redirect=' + 
						       encodeURIComponent(getCurrentPages().pop()?.route || '/pages/index/index')
						}) */
						this.$router.push('/pages/login/login'); // 跳转到登录页
						return false
					} else {
						console.log('已登录且uid存在，继续执行')
						 this.$nextTick().then(() => {  // ✅ 用 .then 代替 await
						    if (this.$refs.auditProjectRef?.queryBylist) {
						      this.$refs.auditProjectRef.queryBylist(uid);
						    }
						  });
						//this.$refs.auditProjectRef.queryBylist()
						
						return true
						}
			 
		},
		async checkAuth_tmp() {
			console.log('checkauth func', this.isCheckingAuth);
			if (this.isCheckingAuth) return
			this.isCheckingAuth = true

			try {
				// 如果未登录，尝试从存储中恢复
				if (!this.isLoggedIn) {
					console.log('checkAuth this.user', this.userData);
					console.log('checkauth func after try user uid', this.userData);
					// 如果仍然未登录，跳转到登录页
					if (!this.isLoggedIn) {
						uni.redirectTo({
							url: '/pages/login/login?redirect=' +
								encodeURIComponent(this.$route.path || '/pages/index/index')
						})
						return false
					}
				}
				return true
			} catch (e) {
				console.error('登录检查失败:', e)
				uni.redirectTo({
					url: '/pages/login/login?redirect=' +
						encodeURIComponent(this.$route.path || '/pages/index/index')
				})
				return false
			} finally {
				this.isCheckingAuth = false
			}
		},
		navigateToAddProject() {
			console.log("跳转到新增页面"); // 调试用
			uni.navigateTo({
				url: '/pages/project/project-add',
				fail: (err) => {
					console.error("跳转失败:", err); // 打印错误信息
				}
			});
		},
		setDarkMode() {
			this.darkMode ? uni.setTabBarStyle({
				backgroundColor: '#2a2b2d'
			}) : uni.setTabBarStyle({
				backgroundColor: '#ffffff'
			})
		},
		setNavBarColor() {
			// navBar-bg-color
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeBgColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		// swichNav(e) {
		// 	this.currentTab = e.index
		// },
		// 滚动切换标签样式
		switchTab(e) {
			this.currentTab = e.detail.current
			this.checkCor()
		},
		// 判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCorSwitchTab() {
			if (this.currentTab > 3) {
				// 这里距离按实际计算
				this.scrollLeft = 300
			} else {
				this.scrollLeft = 0
			}
		},
		checkCor() {
			let tabsNum = this.tabbar.length
			let padding = this.winWidth / 750 * 30
			let width = this.winWidth - padding * 2
			let left = (width / tabsNum - (this.winWidth / 750 * 68)) / 2 + padding
			let scrollLeft = left
			if (this.currentTab > 0) {
				scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab
			}
			this.scrollLeft = scrollLeft
		},
		// 点击标题切换当前页时改变样式
		swichNav(index) {
			let item = this.tabbar[index]
			if (item && item.disabled) return
			if (this.currentTab == index) {
				return false
			} else {
				this.currentTab = Number(index)
			}
		},
		search() {
			//console.log('index index ', this.searchVal);
			if (this.currentTab == 0) {
				this.$refs.auditProjectRef.queryByName(this.searchVal)
			} else if (this.currentTab == 1) {
				this.$refs.auditUserRef.queryByName(this.searchVal)
			}
		},
		clear() {
			this.searchVal = ''
			this.search()
		}
	}
	}
</script>

<style>
	/* tab start */
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	}

	.tui-tabs-relative {
		position: relative;
	}

	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}

	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-unlined::before {
		border-bottom: 0 !important
	}

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-disabled {
		opacity: .6;
	}

	.tui-tabs-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
	}

	.tui-tabs-slider {
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
	}

	/* tab end */
</style>